<template>
  <div class="person">
    <h2>当前水温为：{{temp}}</h2>
    <h2>当前水位为：{{height}}</h2>
    <button @click="ChangeHeight">水位+10</button>
    <button @click="ChangeTemp">水温+10</button>

  </div>
</template>

<script setup name="Person">
import { ref,watch,watchEffect } from 'vue'
let height = ref(0)
let temp = ref(10)

function ChangeHeight(){
   height.value+=10
}
function ChangeTemp(){
  temp.value+=10
}
// //监视：watch
// watch([temp,height],(Value)=>{
//   let [newTemp,newHeight]=Value
//   console.log(newTemp,newHeight)
//   if (newTemp>=60||newHeight>=80){
//     console.log('水烧开了')
//     alert('水烧开了')
//   }
// },{deep:true})

//watchEffect监视：
watchEffect(()=>{
  if (temp.value>=60||height.value>=80){
    console.log('水烧开了')
  }
})



</script>

<style>
.person {
  background-color: burlywood;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
  color: black; /* 设置字体颜色为黑色 */
}
</style>
